<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/mootools-1.4.5.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	$$('.tab').each(function(question){
		question.addEvent('click', function() {
			question.getParent().toggleClass('active');
			question.getParent().getSiblings().each(function(other){
				other.removeClass('active');
			})
		})
	})
});
</script>
<style type="text/css">
li .content{display:none;}
li.active .content{display:block;}
</style>
</head>
<body>
<div class="wrapping">
  <div class="tabbedX ding" id="rcmd_hot">
    <ul class="group ding">
      <li><a class="tab" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"><span>标签1</span></a>
        <div class="content">
          <p style="padding:10px;"><a href="http://www.w3.org/">万维网联盟(W3C)</a>联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其"共享同一个万维网"的使命。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供更好的服务。 </p>
        </div>
      </li>
      <li class="active"><a class="tab" id="rcmd_hot_click" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"><span>标签2</span></a>
        <div class="content">
          <ul style="padding:10px;">
            <li>&rsaquo; <a href="#">这里展示的是标签2的第一个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第二个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第三个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第四个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第五个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第六个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第七个列表</a> <span class="time">2010.12.24</span></li>
            <li class="more">&rsaquo; <a href="#">更多</a></li>
          </ul>
        </div>
      </li>
      <li><a class="tab" href="#" onclick="toggleTabbedX(this);" onmouseover="toggleTabbedX(this);"><span>标签3</span></a>
        <div class="content">
          <ul style="padding:10px;">
            <li>&rsaquo; <a href="#">这里展示的是标签3的第一个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第二个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第三个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第四个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第五个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第六个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第七个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第八个列表</a> <span class="time">2010.12.24</span></li>
            <li class="more">&rsaquo; <a href="#">更多</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
  <div style="color:#F00;">此行文字仅作为Tabbed的高度参照</div>
  <br />
  <br />
  <!-- ######### ######### ######### 注释 ######### ######### ######### -->
  <div class="tabbedY ding" id="rcmd_new">
    <ul class="group ding">
      <li><a class="tab" href="#" onclick="toggleTabbedY(this);" onmouseover="toggleTabbedY(this);"><span>标签1</span></a>
        <div class="content">
          <p style="padding:10px;"><a href="http://www.w3.org/">万维网联盟(W3C)</a>联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其"共享同一个万维网"的使命。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供更好的服务。</p>
        </div>
      </li>
      <li class="active"><a class="tab" id="rcmd_new_click" href="#" onclick="toggleTabbedY(this);" onmouseover="toggleTabbedY(this);"><span>标签2</span></a>
        <div class="content">
          <ul style="padding:10px;">
            <li>&rsaquo; <a href="#">这里展示的是标签2的第一个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第二个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第三个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第四个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第五个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第六个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签2的第七个列表</a> <span class="time">2010.12.24</span></li>
            <li class="more">&rsaquo; <a href="#">更多</a></li>
          </ul>
        </div>
      </li>
      <li><a class="tab" href="#" onclick="toggleTabbedY(this);" onmouseover="toggleTabbedY(this);"><span>标签3</span></a>
        <div class="content">
          <ul style="padding:10px;">
            <li>&rsaquo; <a href="#">这里展示的是标签3的第一个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第二个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第三个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第四个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第五个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第六个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第七个列表</a> <span class="time">2010.12.24</span></li>
            <li>&rsaquo; <a href="#">这里展示的是标签3的第八个列表</a> <span class="time">2010.12.24</span></li>
            <li class="more">&rsaquo; <a href="#">更多</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
  <div style="color:#F00;">此行文字仅作为Tabbed的高度参照</div>
</div>
</body>
</html>
